<html>
  <head>
    <title>图片</title>
  </head>
  <body>
    <script>
        // 图片

                /*
                    一、uni.chooseImage(OBJECT)

                            1、概述

                                    从本地相册选择图片或使用相机拍照

                            2、chooseImage 兼容性
                                    HarmonyOS
                                    HBuilderX 4.23

                                    ★、App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考plus.camera（https://www.html5plus.org/doc/zh_cn/camera.html）

                            3、OBJECT 参数说明

                                            参数名	        类型	      必填	    说明	                                                                    平台差异说明

                                        ①、count	        Number	      否	    最多可以选择的图片张数，默认9	见下方说明
                                        
                                        ②、sizeType	  Array<String>   	否	    original 原图，compressed 压缩图，默认二者都有	                  App、微信小程序、支付宝小程序、百度小程序、小红书小程序
                                        
                                        ③、extension	Array<String>	    否	    根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	                  H5(HBuilder X2.9.9+)
                                        
                                        ④、sourceType	Array<String>	    否	    album 从相册选图，camera 使用相机，默认二者都有。
                                                                                如需直接开相机或直接选相册，请只使用一个选项	

                                        ⑤、crop	          Object	      否	    图像裁剪参数，设置后 sizeType 失效	                                          App 3.1.19+

                                        ⑥、success	      Function	    是	    成功则返回图片的本地文件路径列表 tempFilePaths	

                                        ⑦、fail	          Function	    否	    接口调用失败的回调函数	                                                          小程序、App

                                        ⑧、complete	      Function	    否	    接口调用结束的回调函数（调用成功、失败都会执行）	                                小程序、App


                                    <1>、crop 参数说明

                                                      参数名	  类型	  必填	      说明	                                                              平台差异说明

                                                  ①、quality	Number	  否	    取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。	

                                                  ②、width	  Number	  是	    裁剪的宽度，单位为px，用于计算裁剪宽高比。	

                                                  ③、height	  Number	  是	    裁剪的高度，单位为px，用于计算裁剪宽高比。	

                                                  ④、resize	  Boolean	  否	    是否将width和height作为裁剪保存图片真实的像素值。默认值为true。
                                                                                注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示

                                    <2>、success 返回参数说明

                                                      参数	            类型	                    说明

                                                  ①、tempFilePaths	Array<String>	          图片的本地文件路径列表

                                                  ②、tempFiles	Array<Object>、Array<File>	图片的本地文件列表，每一项是一个 File 对象


                                    <3>、File 对象结构如下

                                                      参数	    类型	      说明

                                                  ①、path	    String	    本地文件路径

                                                  ②、size	    Number	    本地文件大小，单位：B

                                                  ③、name	    String	    包含扩展名的文件名称，仅H5支持

                                                  ④、type	    String	    文件类型，仅H5支持


                                    <4>、注意点：

                                                ①、count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。
                                                    
                                                      并且，在实际的手机浏览器很少有能够支持多选的。

                                                ②、sourceType 值在 H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册，部分浏览器也无法限制是否使用相机。

                                                ③、可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限https://uniapp.dcloud.io/api/other/authorize

                                                ④、App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。、

                                                ⑤、选择照片大多为了上传，uni ui封装了更完善的uni-file-picker组件，文件选择、上传到uniCloud的免费存储和cdn中，一站式集成。
                                                
                                                      强烈推荐使用

                                                ⑥、App上有时会遇到图片旋转90度问题，插件市场有解决方案：图片旋转(https://ext.dcloud.net.cn/search?q=%E5%9B%BE%E7%89%87%E6%97%8B%E8%BD%AC)

                                                ⑦、微信小程序在2023年10月17日之后，使用API需要配置隐私协议 
                                                  
                                                      (https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html)

                                                ⑧、在部分低端机如红米上拍照闪退，拍照调用的是系统相机，当系统内存不足，rom为了给相机activity分配内存而把app的主activity回收了。
                                                
                                                      遇到此问题建议使用nvue页面并内嵌的自定义相机的原生或uts插件。相关分析报告详见

                                                ⑨、由于受google play 照片和视频权限政策的影响，使用uni.chooseImage在上架google play时需要主动添加声明。
                                                
                                                      遇到此问题可以使用插件uni-chooseSystemMedia

                             4、示例

                                          uni.chooseImage({
                                              count:6,// 默认9
                                              sizeType:['orginal','compressed'],  // 可以指定是原图还是压缩图，默认二者都有
                                              sourceType:['ablum'], // 从相框选择
                                              success:function(res){
                                                  console.log(JSON.Stringify(res.tempFilePaths))
                                              }
                                          })

                */


                /*
                        二、uni.previewImage(OBJECT)

                                  1、概述

                                            预览图片

                                  2、previewImage 兼容性
                                              HarmonyOS
                                              HBuilderX 4.23

                                  3、OBJECT 参数说明

                                                  参数名	              类型	          必填	          说明	                                                      平台差异说明

                                              ①、current	        String/Number	    详见下方说明	  详见下方说明	

                                              ②、showmenu	        Boolean	              否	        是否显示长按菜单，默认值为 true	                          微信小程序2.13.0、小红书小程序

                                              ③、urls	            Array<String>	        是	        需要预览的图片链接列表	

                                              ④、indicator	      String	              否	        图片指示器样式，可取值："default" - 底部圆点指示器；

                                                                                                   "number" - 顶部数字指示器； "none" - 不显示指示器。	                App

                                              ⑤、loop	            Boolean	              否	        是否可循环预览，默认值为 false	                                    App 1.9.5+    
                                              
                                              ⑥、longPressActions	Object	              否	        长按图片显示操作菜单，如不填默认为保存相册	                          App 1.9.5+

                                              ⑦、success	        Function	            否	        接口调用成功的回调函数	

                                              ⑧、fail	            Function	            否	        接口调用失败的回调函数	

                                              ⑨、complete	        Function	            否	        接口调用结束的回调函数（调用成功、失败都会执行）


                                          <1>、current 参数说明

                                                      1.9.5+ 支持传图片在 urls 中的索引值

                                                      current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。A
                                                      
                                                      pp平台在 1.9.5至1.9.8之间，current为必填。不填会报错


                                                  ★、注意，当 urls 中有重复的图片链接时：

                                                        ①、传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。

                                                        ②、传索引值，在微信/百度/抖音小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。
                                                        
                                                              其它平台会保留原始的 urls 不会做去重处理。


                                                          举例说明：

                                                              一组图片 [A, B1, C, B2, D]，其中 B1 与 B2 的图片链接是一样的。

                                                                        传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。
                                                                        传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。
                                                                        
                                                                        此时在微信/百度/抖音小程序平台，最终传入的 urls 是 [A, C, B2, D]，过滤掉了与 B2 重复的 B1。


                                          <2>、longPressActions 参数说明

                                                              参数	    类型	      必填	    说明

                                                        ①、itemList	  Array<String>	是	  按钮的文字数组

                                                        ②、itemColor	String	      否	  按钮的文字颜色，字符串格式，默认为"#000000"

                                                        ③、success	  Function	    否	  接口调用成功的回调函数，详见返回参数说明

                                                        ④、fail	      Function	    否	  接口调用失败的回调函数

                                                        ⑤、complete	  Function	    否	  接口调用结束的回调函数（调用成功、失败都会执行）

                                                    ★、success 返回参数说明

                                                                  参数	    类型	      说明

                                                              ①、index	   Number	    用户长按图片的索引值

                                                              ②、tapIndex	 Number	    用户点击按钮列表的索引值

                            4、示例

                                                // 从相册选择6张图
                                                  uni.chooseImage({
                                                          count: 6,
                                                          sizeType: ['original', 'compressed'],
                                                          sourceType: ['album'],
                                                          success: function(res) {
                                                            // 预览图片
                                                            uni.previewImage({
                                                              urls: res.tempFilePaths,
                                                              longPressActions: {
                                                                itemList: ['发送给朋友', '保存图片', '收藏'],
                                                                success: function(data) {
                                                                  console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                                                                },
                                                                fail: function(err) {
                                                                  console.log(err.errMsg);
                                                                }
                                                              }
                                                            });
                                                          }
                                                    });

                            5、注意点

                                      ①、、在非H5端，previewImage是原生实现的，界面自定义灵活度较低。

                                      ②、插件市场有前端实现的previewImage，性能低于原生实现，但界面可随意定义；
                                      
                                            插件市场也有适于App端的previewImage原生插件，提供了更多功能
                */

                /*
                      三、uni.closePreviewImage(OBJECT)

                                      1、概述

                                            关闭预览图片。

                                      2、平台差异说明

                                                App	            H5	      微信小程序	支付宝小程序	百度小程序	抖音小程序	飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                                √ (3.2.15+)	  √ (3.2.15+) 	x	        x           	x	          x	        x	        x	        x         	x	        x	          x

                                      3、closePreviewImage 兼容性
                                                      HarmonyOS
                                                      HBuilderX 4.23

                                      4、OBJECT 参数说明

                                                    参数名	      类型	    必填	    说明

                                                ①、success	    Function	  否	    接口调用成功的回调函数

                                                ②、fail	        Function	  否	    接口调用失败的回调函数

                                                ③、complete	    Function	  否	    接口调用结束的回调函数（调用成功、失败都会执行）

                */


                /*
                      四、uni.getImageInfo(OBJECT)

                                     1、概述

                                            获取图片信息。

                                            小程序下获取网络图片信息需先配置download域名白名单才能生效。

                                     2、平台差异说明

                                              App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                              √	  √	    √	        √	            √	            √	                √	        √	        √	          √         	√

                                     3、getImageInfo 兼容性

                                                      HarmonyOS
                                                      HBuilderX 4.23

                                     4、OBJECT 参数说明

                                                          参数名	          类型	    必填	          说明

                                                        ①、src	          String	    是	      图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径

                                                        ②、success	      Function	  否	      接口调用成功的回调函数

                                                        ③、fail	          Function	  否	      接口调用失败的回调函数

                                                        ④、complete 	    Function	  否	      接口调用结束的回调函数（调用成功、失败都会执行）

                                                      <1>、success 返回参数说明

                                                                      参数名	        类型	  说明	                              平台差异说明

                                                                  ①、width	        Number	图片宽度，单位px	

                                                                  ②、height	        Number	图片高度，单位px	

                                                                  ③、path	          String	返回图片的本地路径	

                                                                  ④、orientation	  String	返回图片的方向，有效值见下表	            App、小程序

                                                                  ⑤、type	          String	返回图片的格式	                        App、小程序


                                                      <2>、orientation 参数说明

                                                                        枚举值	                      说明

                                                                    ①、up	                           默认

                                                                    ②、down	                        180度旋转

                                                                    ③、left	                        逆时针旋转90度

                                                                    ④、right	                      顺时针旋转90度

                                                                    ⑤、up-mirrored	                同up，但水平翻转

                                                                    ⑥、down-mirrored	              同down，但水平翻转

                                                                    ⑦、left-mirrored	              同left，但垂直翻转
                                                                    
                                                                    ⑧、right-mirrored	              同right，但垂直翻转

                                      5、示例：

                                                uni.chooseImage({
                                                      count: 1,
                                                      sourceType: ['album'],
                                                      success: function (res) {
                                                        uni.getImageInfo({
                                                          src: res.tempFilePaths[0],
                                                          success: function (image) {
                                                            console.log(image.width);
                                                            console.log(image.height);
                                                          }
                                                        });
                                                      }
                                                });  
                */
               
                /*
                      五、uni.saveImageToPhotosAlbum(OBJECT)

                                      1、概述

                                                保存图片到系统相册。

                                      2、平台差异说明

                                                  App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                                  √	  x	    √	          √	          √	            √	                √	        √	              √	      √       	√

                                      3、saveImageToPhotosAlbum 兼容性
                                                  HarmonyOS
                                                  HBuilderX 4.23

                                      4、OBJECT 参数说明

                                                      参数名	      类型	    必填	      说明

                                                  ①、filePath	    String	    是	    图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径

                                                  ②、success	    Function	  否	    接口调用成功的回调函数

                                                  ③、fail	        Function	  否	    接口调用失败的回调函数

                                                  ④、complete	    Function	  否	    接口调用结束的回调函数（调用成功、失败都会执行）


                                              ★、success 返回参数说明

                                                         参数名   	类型	    说明

                                                      ①、path	    String	保存到相册的图片路径，仅 App 3.0.5+ 支持

                                                      ②、errMsg	  String	调用结果

                                      5、示例代码

                                                uni.chooseImage({
                                                    count: 1,
                                                    sourceType: ['camera'],
                                                    success: function (res) {
                                                      uni.saveImageToPhotosAlbum({
                                                        filePath: res.tempFilePaths[0],
                                                        success: function () {
                                                          console.log('save success');
                                                        }
                                                      });
                                                    }
                                                });    
                */

                /*
                     六、uni.compressImage(OBJECT)

                                    1、概述

                                           压缩图片接口，可选压缩质量
                                           
                                    2、平台差异说明

                                            App	H5	微信小程序	支付宝小程序	百度小程序	              抖音小程序、飞书小程序	QQ小程序	快手小程序	京东小程序	元服务	小红书小程序
                                            √	  x	  √	          √	          √(基础库版本>=3.110.3)	    √	                    √	      √	          √	        x	        √

                                    3、OBJECT 参数说明

                                                          属性	            类型	        默认值	必填	          说明	                                                                平台差异说明
                                                          
                                                      ①、src	            String		              是	        图片路径，图片的路径，可以是相对路径、临时文件路径、存储文件路径	

                                                      ②、quality	        Number	          80	  否	        压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）

                                                      ③、width	          String	        auto	  否	        缩放图片的宽度，支持像素值（如"100px"）、
                                                                                                              百分比（如"50%"）、
                                                                                                              自动计算（如"auto"，
                                                                                                              即根据width与源图宽的缩放比例计算，若未设置width则使用源图宽度）	              App 3.0.0+

                                                      ④、height	          String	        auto	  否	        缩放图片的高度，支持像素值（如"100px"）、
                                                                                                              百分比（如"50%"）、
                                                                                                              自动计算（如"auto"，
                                                                                                              即根据height与源图高的缩放比例计算，
                                                                                                              若未设置height则使用源图高度）	                                              App 3.0.0+

                                                      ⑤、compressedWidth	Number	        -	      否	        压缩后图片的宽度，单位为px，
                                                                                                              若不填写则默认以 compressedHeight 为准等比缩放	                              微信小程序2.26.0 +、App 3.7.0+、小红书小程序

                                                      ⑥、compressedHeight	Number	        -	      否	        压缩后图片的高度，单位为px，
                                                                                                              若不填写则默认以 compressedWidth 为准等比缩放	                                微信小程序2.26.0 +、App 3.7.0+、小红书小程序

                                                      ⑦、rotate	          Number	        0	      否	        旋转度数，范围0～360	App 3.0.0+

                                                      ⑧、success	        Function		            否	        接口调用成功的回调函数	
                                                      
                                                      ⑨、fail	            Function		            否	        接口调用失败的回调函数	
                                                      
                                                      ⑩、complete	        Function		            否	        接口调用结束的回调函数（调用成功、失败都会执行）
                                                    
                                                <1>、success 返回参数说明

                                                              属性	        类型	    说明
                                                            tempFilePath	String	压缩后图片的临时文件路径


                                 4、示例代码

                                            uni.compressImage({
                                              src: '/static/logo.jpg',
                                              quality: 80,
                                              success: res => {
                                                console.log(res.tempFilePath)
                                              }
                                            })

                                 5、注意

                                          HarmonyOS Next 设备需要添加 ohos.permission.READ_IMAGEVIDEO 权限并且自助签名方
                */
    </script>
  </body>
</html>